<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			id="0"
			:data-current="0"
			:class="{ 'active': active == 'newest' }"
			@click="onTabClick('newest')">
			<text class="tab-view-item--text">最新</text>
		</view>
		<view class="tab-view-item"
			id="1"
			:data-current="1"
			:class="{ 'active': active == 'learning' }"
			@click="onTabClick('learning')">
			<text class="tab-view-item--text">在学</text>
			<text class="iconfont icon-sort sec-left"></text>
		</view>
		<view class="tab-view-item"
			@click="onFilterClick">
			<text class="tab-view-item--text">筛选</text>
			<text class="iconfont icon-filter sec-left"></text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 最新 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<subject-card v-for="item in courseList"
					:key="item.id"
					:item="item"
					@detail="() => onItemClick('subject', item)"
					@book="() => onBookClick('subject', item)">
				</subject-card>
			</uni-list>
			<view v-show="showText" class="empty-text sec-top">{{ text }}</view>
		</swiper-item>
		<!-- 在学 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<subject-learning v-for="item in learningList"
					:key="item.id"
					:item="item"
					@detail="() => onItemClick('subject', item)"
					@book="() => onBookClick('subject', item)">
				</subject-learning>
			</uni-list>
			<view v-show="lShowText" class="empty-text sec-top">{{ lText }}</view>
		</swiper-item>
	</swiper>
	<!-- picker -->
	<mpvue-picker
		:themeColor="themeColor"
		ref="mpvuePicker"
		:mode="mode"
		:deepLength="deepLength"
		:pickerValueDefault="pickerValueDefault"
		@onConfirm="onConfirm"
		@onCancel="onCancel"
		:pickerValueArray="pickerValueArray">
	</mpvue-picker>
	<!-- 筛选 -->
	<uni-drawer ref="showFilter"
		mode="right"
		:width="256">
		<!-- 搜索条件 -->
		<view class="padding-all">
			<view class="section-header">
				<view class="section-title">搜索条件</view>
			</view>
			<view v-if="filterList.length"
				class="section-body">
				<view class="history-item"
					v-for="item in filterList"
					:key="item.id"
					@click="onFilterItem(item)">{{ item.name }}</view>
			</view>
			<view v-else class="empty-text sec-top">没有更多分类～</view>
		</view>
	</uni-drawer>
</view>
</template>

<script>
import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
import SubjectCard from './subject-card.vue';
import SubjectLearning from '../subject/subject-card.vue';
import { getCourseSets, getMyLearning, getCourseFilter } from '@/api/index.js'
export default {
	components: {
		mpvuePicker,
		SubjectCard,
		SubjectLearning
	},
	data() {
		return {
			active: 'newest',
			tabIndex: 0,
			tabs: ['newest', 'learning'],
			pickerValueArray: [],
			themeColor: '#007AFF',
			mode: '',
			deepLength: 1,
			pickerValueDefault: [0],
			courseList: [],
			limit: 20,
			offset: 0,
			showText: false,
			text: '加载中...',
			noMore: false,
			learningList: [],
			lLimit: 20,
			lOffset: 0,
			lShowText: false,
			lText: '加载中...',
			lNoMore: false,
			list: [],
			filterList: []
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		getCourseFilter().then(res => {
			this.list = res.list || [];
			this.pickerValueArray = this.list.map(item => {
				return {
					label: item.name,
					value: item.code
				}
			});
			this.setStyle(0, this.pickerValueArray[0].label);
			this.filterList = this.list[0] && (this.list[0].children || []);
		});
		this.reset();
		this.resetLearning();
		this.getCourseList(this.offset, this.limit);
		this.getLearningList(this.offset, this.limit);
	},
	methods: {
		getCourseList(offset, limit, data) {
			this.showText = true;
			getCourseSets({
				offset: offset,
				limit: limit,
				...data
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.noMore = true;
					this.text = '已经到底啦～';
				}
				this.courseList = this.courseList.concat(res.list || []);
			});
		},
		getLearningList(offset, limit, data) {
			this.lShowText = true;
			getMyLearning({
				offset: offset,
				limit: limit,
				...data
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.lNoMore = true;
					this.lText = '已经到底啦～';
				}
				this.learningList = this.learningList.concat(res.list || []);
			});
		},
		reset() {
			this.courseList = [];
			this.offset = 0;
			this.limit = 20;
			this.noMore = false;
			this.showText = false;
			this.text = '加载中...';
		},
		resetLearning() {
			this.learningList = [];
			this.lOffset = 0;
			this.lLimit = 20;
			this.lNoMore = false;
			this.lShowText = false;
			this.lText = '加载中...';
		},
		onFilterItem(item) {
			if (this.active == 'newest') {
				this.reset();
				this.getCourseList(this.offset, this.limit, {
					categoryId: item.id
				});
			}
			else {
				this.resetLearning();
				this.getLearningList(this.offset, this.limit, {
					categoryId: item.id
				});
			}
		},
		// 单列
		showSinglePicker() {
			this.mode = 'selector';
			this.deepLength = 1;
			this.pickerValueDefault = [0];
			this.$refs.mpvuePicker.show();
		},
		onConfirm(e) {
			let index = e.index[0] || 0;
			this.filterList = this.list[index] && (this.list[index].children || []);
			this.setStyle(0, e.label);
		},
		onCancel() {},
		/**
		 * 修改导航栏buttons
		 * index[number] 修改的buttons 下标索引，最右边索引为0
		 * text[string] 需要修改的text 内容
		 */
		setStyle(index, text) {
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			if (text.length > 3) {
				text = text.substr(0, 3) + '...';
			}
			// #ifdef APP-PLUS
			let currentWebview = page.$getAppWebview();
			let titleNView = currentWebview.getStyle().titleNView;
			// 添加文字过长截取为3个字符，请根据自己业务需求更改
			titleNView.buttons[0].text = text;
			currentWebview.setStyle({
				titleNView: titleNView
			});
			// #endif
			// #ifdef H5
			// h5 临时方案
			document.getElementsByClassName('uni-btn-icon')[1].innerText = text;
			// #endif
		},
		onFilterClick() {
			this.$refs.showFilter.open();
		},
		onItemClick(type, item) {
			uni.navigateTo({
				url: `/pages/${ type }/detail?id=${ item.id }&from=subject`
			})
		},
		onBookClick(type, item) {
			console.log('on book click');
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'learning':
					this.tabIndex = 1;
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		}
	},
	// 下拉刷新
	onReachBottom() {
		if (this.active == 'newest') {
			if (!this.noMore) {
				this.offset = this.offset + 1;
				this.getCourseList(this.offset, this.limit);
			}
		}
		else {
			if (!this.lNoMore) {
				this.lOffset = this.lOffset + 1;
				this.getLearningList(this.lOffset, this.lLimit);
			}
		}
	},
	// 搜索框
	onNavigationBarSearchInputClicked(e) {
		uni.navigateTo({
			url: '/pages/subject/result?from=index'
		})
	},
	// 按钮
	onNavigationBarButtonTap(button) {
		if (button.index == 0) {
			this.showSinglePicker();
		}
	}
}
</script>
